<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
    <Form ref="dynamicFormRef" :model="dynamicForm">
      <Space
        v-for="(option, index) in dynamicForm.options"
        :key="index"
        style="display: flex; margin-bottom: 8px"
        align="baseline"
      >
        <FormItem
          label="标签"
          :name="['options', index, 'label']"
          :rules="{
            required: true,
            message: '标签为必填项',
          }"
        >
          <Input v-model:value="option.label" placeholder="请输入标签" />
        </FormItem>
        <FormItem
          label="值"
          :name="['options', index, 'value']"
          :rules="{
            required: true,
            message: '值为必填项',
          }"
        >
          <Input v-model:value="option.value" placeholder="请输入值" />
        </FormItem>
        <MinusCircleOutlined @click="removeOption(option)" />
      </Space>
      <FormItem>
        <Button type="dashed" block @click="addOption">
          <PlusOutlined />
          添加选项
        </Button>
      </FormItem>
    </Form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { Form, Space, FormItem, Input, FormInstance, Button } from 'ant-design-vue';
  import { reactive, ref } from 'vue';
  import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { useModalInner, BasicModal } from '/@/components/Modal';
  const emit = defineEmits(['success', 'register']);
  function useDynamicForm() {
    interface Option {
      label: string;
      value: string;
      id: number;
    }

    const dynamicFormRef = ref<FormInstance>();
    const dynamicForm = reactive({
      options: [] as Option[],
    });

    function resetFields() {
      dynamicForm.options = [];
    }

    function setFieldsValue(options: Option[]) {
      options?.forEach((option) => {
        dynamicForm.options.push(option);
      });
    }

    const removeOption = (item: Option) => {
      let index = dynamicForm.options.indexOf(item);
      if (index !== -1) {
        dynamicForm.options.splice(index, 1);
      }
    };
    const addOption = () => {
      dynamicForm.options.push({
        label: '',
        value: '',
        id: Date.now(),
      });
    };

    return {
      dynamicFormRef,
      dynamicForm,
      resetFields,
      setFieldsValue,
      removeOption,
      addOption,
    };
  }
  const { resetFields, setFieldsValue, dynamicForm, dynamicFormRef, removeOption, addOption } =
    useDynamicForm();

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    resetFields();
    setModalProps({ confirmLoading: false });
    setFieldsValue(data.dict);
  });

  const getTitle = '新增选项';

  async function handleSubmit() {
    try {
      const values = await dynamicFormRef.value?.validate();
      setModalProps({ confirmLoading: true });
      emit('success', values!.options);
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<script lang="ts">
  export default {
    name: 'OptionModal',
  };
</script>
